<template>
	<view>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <wlk-navbar :isShowLeft="false" title="首页" navbarType='0' ></wlk-navbar>
        <view class="index-content">
            <block v-if="!loading">
                <view class="map-box wlkflex justify-between shadow br04 mt20">
                    <view class="wlkflex left">
                        <image mode="widthFix"  src="/static/images/index/map.png" style="width: 30rpx;"></image>
                        <view class="ml20 u-line-1 address">
                            {{location}}
                        </view>
                    </view>
                    <view class="right wlkflex" @click="$Router.push('/pages/merch/list')">
                        <view>查看附近取送点</view>
                        <uni-icons type="right" size="17" color="#999"></uni-icons>
                    </view>
                </view>
                <view class="mt20">
                    <u-swiper
                            :list="swipers"
                            keyName="image"
                            circular
                            indicator
                            indicatorMode="dot"
                            :indicatorStyle="indicatorStyle"
                            @click="clickSwiper"
                            height="200"
                    ></u-swiper>
                </view>
                <view class="mt20">
                    <u-notice-bar url="/pages/notice/list" mode="link" icon="volume" :color="themeColor"  :customStyle="notstyle" :text="notice.title"></u-notice-bar>
                </view>
                <view class="mt20 grid pd20 wlkflex justify-between">
                    <view v-for="(item,index) in grids" @click="jump(item)">
                        <view class="center">
                            <image mode="widthFix" :src="item.image" style="width: 100rpx;"></image>
                        </view>
                        <view class="title mt10">{{item.name}}</view>
                    </view>
                </view>
                <view class="mt20 goods-list">
                    <view class="pd20 goods shadow br08 wlkflex mb20 justify-between align-start" v-for="(item,index) in goods" @click="$Router.push('/pages/goods/detail?id='+item.id)">
                        <image :src="item.images[0]" class="br08"  mode="aspectFill"></image>
                        <view class="info wlkflex wrap align-content-between">
                            <view class="wd100">
                                <view class="title u-line-1">{{item.title}}</view>
                                <view class="desc u-line-2 mt05">{{item.desc}}</view>
                            </view>
                            <view class="wd100 money wlkflex justify-between">
                                <view class="left">
                                    <view class="vip wlkflex br04 overHidden">
                                        <view class="name" :style="{backgroundColor: themeColor}">会员价</view>
                                        <view class="vip_price"><text class="mr05">¥</text>{{item.vip_price}}</view>
                                    </view>
                                    <view class="price mt10"><text class="mr05">¥</text>{{item.price}}</view>
                                </view>
                                <view class="right wlkflex justify-center relative" :style="{backgroundColor: themeColor}" @tap.stop="goodsAdd(index)">
                                    <image  src="/static/images/index/cart.png" mode="widthFix"></image>
                                    <view class="badge" v-if="item.cartTotal>0">
                                        <u-badge bgColor="#FF5904"  max="99" :value="item.cartTotal"></u-badge>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="load-more">
                        <u-loadmore :status="loadStatus" :loading-text="loadingText"  :loadmore-text="loadmoreText" :nomore-text="nomoreText" dashed  line />
                    </view>
                </view>
            </block>
        </view>

        <view class="fixed-cart wd100 relative wlkflex justify-between" :style="{bottom:cartBottom}">
            <view class="wlkflex">
                <view class="cart-btn wlkflex justify-center relative" :style="{backgroundColor: themeColor}">
                    <image  src="/static/images/index/cart.png" mode="widthFix"></image>
                    <view class="badge">
                        <u-badge bgColor="#FF5904"  max="99" :value="cartTotal"></u-badge>
                    </view>
                </view>
                <view class="total-price">¥ <text class="ml05">{{priceTotal}}</text></view>
            </view>
            <view :style="{backgroundColor: themeColor}" class="pay-btn br06"
                  @click="$Router.pushTab('/pages/index/cart')">去结算
            </view>
        </view>
        <u-popup closeable :show="addShow" @close="addShow=false" round="20">
            <wlk-goods-add @editAddShow="setAddShow" @close="closeAddShow" :item="goods[choseGoodsIndex]"></wlk-goods-add>
        </u-popup>

        <wlk-tabbar></wlk-tabbar>
    </view>
</template>

<script>
    import share from "@/wlkutils/share";
    import { toUrl } from '@/wlkutils/tools';
    import { cal } from '@/wlkutils/cal'
    var _self;
    var QQMapWX = require('@/wlkutils/qqmap-wx-jssdk.min.js');
    var qqmapsdk;
    import base from '@/base';
    import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
    export default {
        data() {
			return {
                indicatorStyle:{
                    left:'30rpx'
                },
                notstyle:{
                    'padding':'20rpx',
                    'borderRadius':'4px',
                    'background-color':'#e4eaff'
                },
                swipers:[],
                goods:[],
                grids:[],
                notice:{},
                cartTotal:0,
                priceTotal:0.00,
                loading:true,
                page: 1,
                loadStatus:'loading',
                loadingText: '努力加载中',
                loadmoreText: '轻轻上拉',
                nomoreText: '实在没有了',
                cartBottom:0,
                systemInfo:base.systemInfo,
                addShow:false,
                choseGoodsIndex:0,
			}
		},
        computed:{
            ...mapGetters(['lat','lng','location','themeColor','isLogin','userInfo'])
        },
        watch:{
            isLogin(val){
                this.initGoodsList();
            }  
        },
        onShareAppMessage(res){
            return share.setShareInfo();
        },
		onLoad() {
            uni.hideTabBar();
            this.cartBottom = uni.$u.addUnit(50+this.systemInfo.tabbarPaddingB, 'px')
            _self = this;
            qqmapsdk = new QQMapWX({
                key: base.mapKey
            });
            uni.authorize({
                scope:'scope.userLocation',
                success(){
                    uni.getLocation({
                        type: 'wgs84',
                        success: function (res) {
                            const latitude = res.latitude
                            const longitude = res.longitude
                            _self.$store.state.lat =res.latitude;
                            _self.$store.state.lng =res.longitude;
                            qqmapsdk.reverseGeocoder({
                                location: {
                                    latitude: latitude,
                                    longitude: longitude
                                },
                                success: function (res) {
                                  _self.$store.state.location = res.result.address_component.city + res.result.address_component.district + res.result.address_component.street + res.result.address_component.street_number;
                                },
                                fail: function (res) {
                                    console.log(res);
                                },
                                complete: function (res) {
                                }
                            });
                        },fail:function (res) {
                            uni.showModal({
                                title: '提示',
                                content: '请先在设置页面打开“地理位置”使用权限',
                                confirmText: '去设置',
                                cancelText: '算了',
                                success: data => {
                                    if (data.confirm) {
                                        uni.openSetting();
                                    }
                                }
                            });
                        },complete:function (e) {
                            console.log(e)
                        }
                    });
                }
            })
		},
        onShow() {
            this.loadStatus = 'loading';
            this.page = 1;
            this.goods = [];
            _self.getData();
            _self.getGoods();
        },
        onPageScroll(e){
            _self.scrollTop = e.scrollTop;
        },
        onReachBottom() {
            if(this.loadStatus == "nomore"){
                return;
            }
            this.page++;
            this.getGoods();
        },
		methods: {
            initGoodsList(){
                this.loadStatus = 'loading';
                this.page = 1;
                this.goods = [];
                _self.getData();
                _self.getGoods();
            },
            submit(){
              if (_self.total===0){
                uni.$u.toast('请选择商品')
                return
              }
              this.$Router.push('/pages/info/confirm')

            },
            getData(){
                this.loading = true;
                uni.$u.http.post('index/index', {
                }).then(res => {
                    _self.swipers = res.data.swipers;
                    _self.notice = res.data.notice;
                    _self.grids = res.data.grids;
                    _self.cartTotal = res.data.cartTotal;
                    _self.priceTotal = res.data.priceTotal;
                    this.loading = false;
                }).catch(res => {
                    this.loading = false;
                })
            },
            getGoods(){
                uni.$u.http.post('goods/getList', {
                    type: 'home',
                    page: this.page,
                }).then(res => {
                    if (res && res.data && res.data.rows) {
                        this.goods = this.goods.concat(res.data.rows);
                    }
                    this.loadStatus = res.data.rows.length < res.data.limit ? 'nomore' : 'loadmore';
                }).catch(res => {
                  
                })
            },
            goodsAdd(index){
                this.choseGoodsIndex = index;
                this.addShow = true;
            },
            closeAddShow(){
                this.addShow = false;
            },
            setAddShow(quantity){
                this.addShow = false;
                if(quantity>0){
                    this.goods[this.choseGoodsIndex].cartTotal = cal.jia(this.goods[this.choseGoodsIndex].cartTotal,quantity).valueOf();
                    this.cartTotal = cal.jia(this.cartTotal,quantity).valueOf();
                    if( this.isLogin && !uni.$u.test.isEmpty(this.userInfo.card) && this.userInfo.card.status == 'normal'){
                        this.priceTotal = cal.jia(this.priceTotal,this.goods[this.choseGoodsIndex].vip_price);
                    }else{
                        this.priceTotal = cal.jia(this.priceTotal,this.goods[this.choseGoodsIndex].price);
                    }
                }
            },
            jump(v){
                let url = '';
                if(v.type=='link'){
                    url = v.link_info.path;
                }else{
                    url = '/pages/article/detail?id='+v.article_id;
                }
                toUrl(url)
            },
            clickSwiper(k){
                if(!uni.$u.test.isEmpty(this.swipers[k].link_info)){
                   this.jump( this.swipers[k].link_info.path);
                }

            }
		}
	}
</script>

<style lang='scss'>
    page{
        background-color: #FFFFFF!important;
        .index-content{
            width: 92%;
            margin: 0 auto;
          .map-box{
              font-size: $font-base;
              padding: 30rpx 30rpx;
              .left{
                  .address{
                      width: 300rpx;
                  }
              }
              .right{
                  color: $uni-text-color-grey;
              }
          }
            .grid{
                font-size: $font-base;
            }
            .goods-list{
                padding-bottom: 180rpx;
                .goods{
                    background-color: #FFFFFF;
                    image{
                        width: 220rpx;
                        height: 220rpx;
                        display: block;
                    }
                    .info{
                        width: 64%;
                        height: 220rpx;
                        .title{
                            font-size: $font-lt;
                            font-weight: bold;
                        }
                        .desc{
                            color: $uni-text-color-grey;
                            font-size: $font-sm;
                        }
                        .money{
                            font-size: $font-base;
                            .left{
                                .vip{
                                    max-width: 280rpx;
                                    background-color: $-wash-wait-color;
                                    .name{
                                        font-size: $font-base;
                                        color: #FFE785;
                                        padding: 6rpx 10rpx;

                                    }
                                    .vip_price{
                                        padding: 6rpx 10rpx;
                                    }
                                }
                                .price{
                                    color: $-wash-price-color;
                                }
                            }
                            .right{
                                width:75rpx;
                                height:75rpx;
                                border-radius: 50%;
                                image{
                                    width: 40rpx;
                                    height: 40rpx;
                                }
                                .badge{
                                    position: absolute;
                                    top: -15rpx;
                                    right: -10rpx;
                                    border: 2px solid #FFFFFF;
                                    border-radius: 15px;
                                }
                            }

                        }

                    }

                }
            }

        }
        .fixed-cart{
            background-color: #FFFFFF;
            position: fixed;
            height: 110rpx;
            border-bottom:1px solid #f9f9f9;
            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
            padding: 0 30rpx;
            .cart-btn{
                width:100rpx;
                height:100rpx;
                border-radius: 50%;
                margin: -50rpx 30rpx 0 0;
                image{
                    width: 45rpx;
                    height: 45rpx;
                }
                .badge{
                    position: absolute;
                    top: -10rpx;
                    right: -10rpx;
                    border: 2px solid #FFFFFF;
                    border-radius: 15px;
                }
            }
            .total-price{
                font-size: $font-lg;
                color: $-wash-price-color;
            }
            .pay-btn{
                padding: 15rpx 40rpx;
                color: #FFFFFF;
            }
        }

    }

</style>
